<template>
  <div>
    <el-dialog
        :title="'审核' + title"
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="onClose"
    >
      <div style="margin-bottom: 20px;">
        <h3>申请人信息</h3>
        <el-descriptions :column="2" border>
          <template v-for="(value, key) in displayFields">
            <el-descriptions-item
              v-if="formData[key] && !['id', 'status', 'review_remark', 'reviewer', 'create_time', 'update_time'].includes(key)"
              :key="key"
              :label="getFieldLabel(key)"
              :span="key === 'address' || key === 'purpose' ? 2 : 1">
              {{ formatFieldValue(key, formData[key]) }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </div>

      <div style="margin-bottom: 20px;">
        <h3>审核信息</h3>
        <SubmitForm
            ref="submitFormRef"
            :formList="formList"
            :ruleForm="ruleForm"
            :rules="rules"
            :loading="submitLoading"
            :showClose="false"
            @save="onSubmit"
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http } from "@/api";
import SubmitForm from "@/components/SubmitForm";

export default {
  name: "YouthHostelReview",
  components: {
    SubmitForm
  },
  data() {
    return {
      dialogVisible: false,
      submitLoading: false,
      formData: {},
      title: '',
      ruleForm: {
        status: '',
        reviewer: '',
        review_remark: ''
      },
      rules: {
        status: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ],
        reviewer: [
          { required: true, message: '请输入审核人', trigger: 'blur' }
        ]
      },
      formList: [
        {
          label: '审核状态',
          prop: 'status',
          name: 'select',
          options: [
            { value: 1, label: '审核通过' },
            { value: 2, label: '审核拒绝' }
          ]
        },
        {
          label: '审核人',
          prop: 'reviewer',
          name: 'input',
          placeholder: '请输入审核人姓名'
        },
        {
          label: '审核备注',
          prop: 'review_remark',
          name: 'rich',
          placeholder: '请输入审核备注'
        }
      ]
    };
  },
  methods: {
    open(data) {
      this.dialogVisible = true;
      this.formData = { ...data };
      this.title = this.getModuleTitle();
      this.ruleForm = {
        status: data.status || '',
        reviewer: data.reviewer || '',
        review_remark: data.review_remark || ''
      };
    },
    onClose() {
      this.dialogVisible = false;
      this.formData = {};
      this.ruleForm = {
        status: '',
        reviewer: '',
        review_remark: ''
      };
    },
    async onSubmit() {
      try {
        this.submitLoading = true;

        const submitData = {
          ...this.ruleForm
        };

        await http.youthHostel.update(this.formData.id, submitData);

        this.$message.success('审核成功');
        this.$emit('get-page');
        this.onClose();
      } catch (error) {
        console.error('审核失败:', error);
        if (error.response && error.response.data && error.response.data.message) {
          this.$message.error(error.response.data.message);
        } else {
          this.$message.error('审核失败');
        }
      } finally {
        this.submitLoading = false;
      }
    },
    getModuleTitle() {
      return '青年驿站申请';
    },
    getFieldLabel(key) {
      const labels = {
        name: '姓名',
        id_card: '身份证号',
        gender: '性别',
        phone: '联系电话',
        graduation_date: '毕业时间',
        school: '毕业院校',
        major: '专业',
        education: '学历',
        address: '常住地址',
        emergency_phone: '紧急联系电话',
        check_in_start_date: '申请入住开始日期',
        check_in_end_date: '申请入住结束日期',
        purpose: '申请入住事由',
        id_card_front_photo: '身份证正面照片',
        id_card_back_photo: '身份证反面照片',
        graduation_cert_photo: '毕业证书或教育部学历证书电子注册备案表',
        degree_cert_photo: '学位证照片',
        invitation_material_photo: '在企业求职面试现场照片'
      };
      return labels[key] || key;
    },
    formatFieldValue(key, value) {
      if (key === 'gender') {
        return value === '男' ? '男' : value === '女' ? '女' : value;
      }
      if (key === 'education') {
        const educationMap = {
          '高中': '高中',
          '中专': '中专',
          '大专': '大专',
          '本科': '本科',
          '硕士': '硕士',
          '博士': '博士'
        };
        return educationMap[value] || value;
      }
      if (key === 'status') {
        const statusMap = {0: '待审核', 1: '审核通过', 2: '审核拒绝'};
        return statusMap[value] || value;
      }
      return value;
    }
  },
  computed: {
    displayFields() {
      return Object.keys(this.formData).filter(key =>
        this.formData[key] &&
        !['id', 'status', 'review_remark', 'reviewer', 'create_time', 'update_time'].includes(key)
      );
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
